<template>
  <!-- <router-link :to="`/articleDetail/${article.id}`"> -->
  <div
    class="article-item"
    @click="$router.push(`/articleDetail/${article.id}`)"
  >
    <div class="author-container">
      <!-- 头像 -->
      <img class="avatar" :src="article.avatar" alt="头像" />
      <div>
        <h3 class="author-name">{{ article.creator }}</h3>
        <div class="author-info">
          {{ article.stem }} |{{ article.createdAt }}
        </div>
      </div>
    </div>
    <p class="article-content">{{ cleanHtml }}</p>
    <div class="article-info">
      点赞 {{ article.likeCount }} | 浏览 {{ article.views }}
    </div>
  </div>
  <!-- </router-link> -->
</template>

<script>
export default {
  props: {
    article: Object,
  },
  computed: {
    cleanHtml() {
      // 去掉html标签
      return this.article.content.replace(/<[^>]*>/g, "");
    },
  },
};
</script>

<style lang="less" scoped>
.article-item {
  margin: 0 16px;
  padding: 16px 0;
  border-bottom: 1px solid #e3e4e5;
}
// 作者容器
.author-container {
  display: flex;
  align-items: center;
}
//   头像
.avatar {
  width: 50px;
  height: 50px;
  margin-right: 15px;
  border-radius: 50%;
}
//   作者name
.author-name {
  margin: 0;
  font-weight: normal;
}
//   作者信息
.author-info,
.article-info {
  padding-top: 5px;
  color: #999;
}
.article-content {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
